<template>
	<div class="imgPage">
		<div class="pageTitle">随手拍 <span>(共{{ pageData.count?pageData.count:0 }}张图片)</span></div>
		<div class="myrandomly">
			<!--图文主体内容-->
			<vue-scroll :ops="ops" style="width:100%;height:600px">
				<div class="mainBox" v-if="pageData.list && pageData.list.length > 0">
					<div class="txtPicBox" v-for="(item, index) in pageData.list" :key="index">
						<div class="myrandomlyTxt flex">
							<div class="flex">
								<p>{{ item.date }}</p>
								<span class="siteTxt">{{ item.attributionName }}</span>
							</div>
						</div>
						<div class="imagesBox" v-if="item.takePhotosEntities && item.takePhotosEntities.length > 0">
							<div class="imagesBoxList nt" v-for="list in item.takePhotosEntities" :key="list.id">
								<el-image class="imgSize" :src="list.picture" fit="cover" :preview-src-list="[list.picture]" alt=""></el-image>
								<div class="imgSizeBtnBox flex">
									<div><i class="el-icon-first-aid-kit" title="病虫害诊断" @click="notFun"></i></div>
									<div><i class="el-icon-chat-line-square" title="评价" @click="evaluateImages(list)"></i></div>
									<div><i class="el-icon-share" title="分享" @click="share(list)"></i></div>
									<div><i class="el-icon-delete" title="删除" @click="deleteImages(list)"></i></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<nodata v-else></nodata>
			</vue-scroll>
			<!-- 评价 -->
			<el-dialog title="评价" :visible.sync="dialogVisible" width="80rem">
				<div class="evaluateBox">
					<div class="textareaBox">
						<el-input type="textarea" v-model="evaluateContent" placeholder="请写下您的评价吧..." resize="none"></el-input>
					</div>
					<div class="evaluateLists">
						<vue-scroll :ops="ops" style="width:100%;height:400px">
							<ul>
								<li class="flex">
									<el-image class="hraderImages" :src="evaluateContentList.head" fit="cover" alt=""></el-image>
									<div class="evaluateListsContent">
										<div class="titles">{{evaluateContentList.name}}<span>{{evaluateContentList.remarksTime}}</span></div>
										<div class="contens">{{evaluateContentList.remarks}}</div>
									</div>
								</li>
							</ul>
						</vue-scroll>

					</div>
				</div>

				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="commentPhotos">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>

</template>

<script>
	import nodata from '../../../../../components/noData.vue'
	// import evaluate from './components/evaluate.vue'
	// import diagnose from './components/diagnose.vue'
	export default {
		components: {
			nodata
			// evaluate,
			// diagnose
		},
		data() {
			return {
				// 滚动条样式设置
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				userId: '',
				pageData: '',
				// 评价
				dialogVisible: false,
				evaluateContent: '', // 评价内容
				evaluateContentId: '', // 当前点击评论的图片id
				evaluateContentList: '' // 用户品论详情
			}
		},
		created() {
			// 页面始化设置左边导航栏状态
			this.$store.commit('set_myManagementNavIndex', 13)
			this.userId = this.$store.state.user.userInfo.id
		},
		mounted() {
			this.getPageData()
		},
		watch: {

		},
		methods: {
			evaluateImages(list) {
				// 打开评价弹窗
				this.dialogVisible = true
				this.evaluateContent = ''
				this.evaluateContentId = list.id
				this.evaluateContentList = list
				// if(list.remarks){
				// 	this.$request.postForm(this.$api.findUserIdQuery, {
				// 		userId: list.userId
				// 	}).then(res=>{
				// 		if(res.code == 200){
				// 			this.evaluateContentList = res.data
				// 		}
				// 	})
				// }

			},
			commentPhotos() {
				// 给随手拍图片添加评论
				if (this.evaluateContent == '') {
					this.$message.error('请先写评论再尝试提交')
				} else {
					this.$request.postForm(this.$api.commentPhotos, {
						ids: this.evaluateContentId,
						content: this.evaluateContent
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('评论成功')
							setTimeout(() => {
								this.dialogVisible = false
							}, 700)
							// 刷新接口，所有选项回复可选择状态
							this.getPageData()
						}
					})
				}
			},
			share(list) {
				// 分享
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', list.picture);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message.success('链接复制成功，请分享')
				}
				document.body.removeChild(input);
			},
			deleteImages(list) {
				this.$confirm('确定删除该图片?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deletePhotos, {
						ids: list.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							this.getPageData()
						}
					})
				})
			},
			notFun() {
				// 功能暂未开放
				this.$alert('功能暂未开放', '提示', {
					confirmButtonText: '确定',
					callback: action => {

					}
				});
			},
			getPageData() {
				this.$request.postForm(this.$api.getPhotos, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.pageData = res.data

					}
				})
			},


		}

	}
</script>

<style scoped="scoped" lang="scss">
	.pageTitle {
		padding: 0 20px;
		border-bottom: 1px solid #DCDCDC;
		height: 60px;
		align-items: center;
		line-height: 60px;
		font-size: 16px;

		span {
			color: #AAAAAA;
			font-size: 12px;
			margin: 8px 0 0 0;
		}
	}

	.myrandomly {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		padding: 20px;
	}

	.flex {
		display: flex;
		flex-wrap: nowrap;
	}


	.imagesBoxList:hover {
		.imgSizeBtnBox {
			// display: block;
			opacity: 1;
		}
	}

	.imgSizeBtnBox {
		width: 100%;
		justify-content: space-between;
		flex-wrap: nowrap;
		color: #FFFFFF;
		font-size: 16px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		// display: none;
		opacity: 0;
		transition: all .8s;
	}

	.imgSizeBtnBox div {
		cursor: pointer;
	}

	.imgSizeBtnBox div:hover {
		color: #23B14D;
	}


	/**主体内容 */
	.mainBox {
		width: 900px;
		background-color: #fff;
	}

	.txtPicBox {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.myrandomlyTxt {
		position: relative;
		line-height: 15px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
	}


	.myrandomlyTxt>p {
		line-height: 15px;
		text-align: left;
		color: #333;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-right: 20px;
	}

	.siteTxt {
		box-sizing: border-box;
		color: #AAAAAA;
		color: #aaa;
		font-size: 12px;
		margin-left: 20px;
	}

	.imagesBox {
		padding: 15px 0;
	}

	.imagesBoxList {
		position: relative;
		display: inline-block;
		margin-left: 4px;
	}

	.nt:nth-child(6n+1) {
		margin-left: 0;
	}

	.imgSize {
		width: 146px;
		height: 146px;
		cursor: pointer;
		display: block;
	}

	.evaluateLists {
		width: 100%;
		margin-top: 10px;

		.hraderImages {
			width: 40px;
			height: 40px;
			display: block;
			border-radius: 100%;
			margin-right: 20px;
		}

		.evaluateListsContent {
			width: calc(100% - 80px);

			.titles {
				font-size: 14px;
				font-weight: bold;

				span {
					color: #AAAAAA;
					font-size: 12px;
					margin-left: 10px;
					font-weight: 100;
				}
			}

			.contens {
				margin-top: 5px;
				font-size: 12px;
				color: #AAAAAA;
				text-align: justify;
				line-height: 20px;
			}
		}
	}
</style>
